<template>
    <el-form>
      <p>时间和日期</p>
        <div class="block">
            <span class="demonstration">默认</span>
            <el-date-picker v-model="value1" type="datetime" placeholder="请选择日期时间"></el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">带快捷选项</span>
            <el-date-picker v-model="value2" type="datetime" placeholder="请选择日期时间"  align="right" :picker-options="pickerOptions"></el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">设置默认时间</span>
            <el-date-picker v-model="value3" type="datetime" placeholder="请选择日期时间"  default-time="12:00:00"></el-date-picker>
        </div>

        <p>日期时间范围</p>
        <div class="block">
            <span class="demonstration">默认</span>
            <el-date-picker v-model="value3" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">带快捷选项</span>
            <el-date-picker v-model="value4" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
        </div>

        <p>默认起始结束时刻</p>
        <div class="block">
          <span class="demonstration">起始日期时刻为 12:00:00</span>
          <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']"></el-date-picker>
        </div>
        <div class="block">
          <span class="demonstration">起始日期时刻为 12:00:00,结束日期时刻为 08:00:00</span>
          <el-date-picker v-model="value2" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00', '08:00:00']"> </el-date-picker>
        </div>
    </el-form>
</template>

<script>
  export default{
    data() {
      return {
        pickerOptions:{
          shortcuts:[{
            text:'今天',
            onClick(picker) {
              picker.$emit('pick',new Date());
            }
          }, {
            text:'昨天',
            onClick(picker) {
              const date=new Date();
              date.setTime(date.getTime()-3600*1000*24);
              picker.$emit('pick',date);
            }
          }, {
            text:'一周前',
            onClick(picker) {
              const date=new Date();
              date.setTime(date.getTime()-3600*1000*24*7);
              picker.$emit('pick',date);
            }
          },{
             text: '最近一周',
             onClick(picker) {
               const end=new Date();
               const start=new Date();
               start.setTime(start.getTime()-3600*1000*24*7);
               picker.$emit('pick',[start,end]);
             }
          }, {
             text: '最近一个月',
             onClick(picker) {
               const end=new Date();
               const start=new Date();
               start.setTime(start.getTime()-3600*1000*24*30);
               picker.$emit('pick',[start,end]);
             }
         }, {
             text: '最近三个月',
             onClick(picker) {
               const end=new Date();
               const start=new Date();
               start.setTime(start.getTime()-3600*1000*24*90);
               picker.$emit('pick',[start,end]);
             }
         }]
        },
        value1:'',
        value2:'',
        value3:'',
        value4:[new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      }
    }
  }
</script>